require(['./config'], () => {
    require(['template', 'url', 'swiper','header', 'footer','float-box'], (template, url, Swiper) => {
        class Index {
            constructor () {
                this.getCategory()
                this.list()
                this.banner()
            }
            getCategory () {
                // 颗粒度
                $.get('/libs/json/homeCategory.json', resp => {
                    this.renderCategory(resp)
                })
            }
            renderCategory (list) {
                // templat方法的第一个参数传script的id名（不加#）
                // 第二个参数传对象，对象里面写模板所需要的数据
                // 对象的属性名对应模板里面所需要的变量名
                // 对象里的属性值对应从后端取到的数据
                const html = template('categoryTemplate', { list })
                $('#categoryList').html(html)
            }
            list () {
                $.get(url.rap2 + '/api/index/list', resp => {
                    if (resp.code === 200) {
                        const { list } = resp.body
                        $('#goodsList').html(template('goodsTemplate', { list }))
                    }
                })
            }
            banner(){
                new Swiper ('.lunbo', {
                    loop: true, // 循环模式选项
                    autoplay:true,
                    // 如果需要分页器
                    pagination: {
                      el: '.banner-pagination',
                    },
                    
                    // 如果需要前进后退按钮
                    navigation: {
                      nextEl: '.swiper-button-next',
                      prevEl: '.swiper-button-prev',
                    },
                    
                    
                  })        
            }
        }
        new Index()
    })
})